<template>
  <div class="wechat">
    <!-- 卡片视图区域 -->
    <div class="wechat_card">
      <!-- 布局 -->
      <el-row :gutter="20" class="wechat_card_head" type="flex">
        <el-col :span="8">
          <!-- 搜索框及添加区域 -->
          <el-input placeholder="请输入职工号或者职员姓名" v-model="queryInfo.query" clearable @clear="getClerkList" size="medium">
            <el-button slot="append" size="medium" icon="el-icon-search" @click="getClerkList"></el-button>
          </el-input>
        </el-col>
        <el-button size="medium" class="btn_head_medium" type="primary" @click="addDialogVisible = true" icon="el-icon-circle-plus-outline">新增</el-button>

        <el-button size="medium" type="danger" @click="removeUserByIds" icon="el-icon-remove-outline">删除</el-button>
        <!-- 证件类型筛选 -->
        <el-select class="select_head_medium" size="medium" v-model="certificateValue" @change="selectChange" clearable multiple collapse-tags placeholder="按证件类型筛选">
          <el-option label="身份证" value="身份证"></el-option>
          <el-option label="护照" value="护照"></el-option>
          <el-option label="警官证" value="警官证"></el-option>
          <el-option label="军官证" value="军官证"></el-option>
        </el-select>
        <!-- 表格列筛选 -->
        <div class="tools_head">
          <el-popover placement="bottom" trigger="click">
            <el-checkbox-group v-model="colOptions">
              <el-checkbox v-for="item in colSelect" :label="item" :key="item" style="display: block; margin: 10px">
              </el-checkbox>
            </el-checkbox-group>
            <div slot="reference">
              <el-tooltip content="筛选列" placement="bottom">
                <el-button size="small" icon="el-icon-menu"></el-button>
              </el-tooltip>
            </div>
            <el-button size="small" type="text" @click="filterFunHandle('allchecked')">全选</el-button>
            <el-button size="small" type="text" @click="filterFunHandle('cancel')">取消全选</el-button>
          </el-popover>
          <!-- 导出EXCEL -->
          <el-tooltip content="导出excel" placement="bottom">
            <el-button size="small" icon="el-icon-download" style="margin-left: 10px" @click="handleDownload"></el-button>
          </el-tooltip>
        </div>
      </el-row>
      <!-- 职员列表区域 -->
      <el-table :data="clerkList" style="width: 100%" height="85%" border stripe :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" tooltip-effect="dark" :row-key="
          (row) => {
            return row.id;
          }
        " @selection-change="handleSelectionChange" ref="tableDataRef">
        <el-table-column type="selection" :reserve-selection="true"></el-table-column>
        <el-table-column type="index" label="序号" v-if="colData[0].istrue"></el-table-column>
        <el-table-column prop="employeeNo" label="职工号" v-if="colData[1].istrue"></el-table-column>
        <el-table-column prop="name" label="职员姓名" v-if="colData[2].istrue"></el-table-column>
        <el-table-column prop="gender" label="职员性别" v-if="colData[3].istrue">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" v-if="colData[4].istrue" width="130px"></el-table-column>
        <el-table-column prop="address" label="居住地址" v-if="colData[5].istrue" show-overflow-tooltip></el-table-column>
        <el-table-column prop="certificateType" label="证件类型" v-if="colData[6].istrue"></el-table-column>
        <el-table-column prop="idCard" label="证件号" v-if="colData[7].istrue" width="180px"></el-table-column>
        <el-table-column prop="idCardImg" label="证件图片" v-if="colData[8].istrue" width="130px" show-overflow-tooltip>
          <template slot-scope="scope">
            <a :href="scope.row.idCardImg" target="_blank">
              {{ scope.row.idCardImg }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="idCardAddress" label="身份证地址" v-if="colData[9].istrue" width="180px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="startTime" label="入职时间" v-if="colData[10].istrue" width="180px"></el-table-column>
        <el-table-column prop="standByPeople" label="备用联系人姓名" v-if="colData[11].istrue" width="130px">
        </el-table-column>
        <el-table-column prop="standByRelationship" label="备用联系人关系" v-if="colData[12].istrue" width="130px">
        </el-table-column>
        <el-table-column prop="standByPhone" label="备用联系人电话" v-if="colData[13].istrue" width="130px">
        </el-table-column>
        <el-table-column prop="jobId" label="岗位" v-if="colData[14].istrue">
        </el-table-column>
        <el-table-column prop="departmentId" label="所属部门" v-if="colData[15].istrue">
        </el-table-column>
        <el-table-column prop="img" label="照片" v-if="colData[16].istrue" width="130px" show-overflow-tooltip>
          <!-- <template slot-scope="scope">   
            <a :href="scope.row.img.split(',')[0]" target="_blank">
              {{ scope.row.img.split(',')[0] }}
            </a>
            <br/>
            <a :href="scope.row.img.split(',')[1]" target="_blank" v-if="scope.row.img.split(',').length>1">
              {{ scope.row.img.split(',')[1] }}
            </a>
          </template> -->
           <template slot-scope="scope">   
            <a :href="item" target="_blank" v-for="(item,index) in scope.row.img.split(',')" :key="index">
              {{ item }}
              <br v-if="scope.row.img.split(',').length>1"/>
            </a>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150px" fixed="right">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加职员的对话框 -->
      <el-dialog title="添加职员信息" :visible.sync="addDialogVisible" width="50%" @close="addDialogReset">
        <!-- 内容主题区域 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="110px" :inline="true">
          <el-form-item label="职工号" prop="employeeNo">
            <el-input v-model="addForm.employeeNo"></el-input>
          </el-form-item>
          <el-form-item label="职员姓名" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="职员性别" prop="gender">
            <el-input v-model="addForm.gender"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="addForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="居住地址" prop="address">
            <el-input v-model="addForm.address"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="certificateType">
            <el-select v-model="addForm.certificateType" placeholder="请选择证件类型" class="select">
              <el-option label="身份证" value="身份证"></el-option>
              <el-option label="护照" value="护照"></el-option>
              <el-option label="警官证" value="警官证"></el-option>
              <el-option label="军官证" value="军官证"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号" prop="idCard">
            <el-input v-model="addForm.idCard"></el-input>
          </el-form-item>
          <el-form-item label="证件图片" prop="idCardImg">
            <el-input v-model="addForm.idCardImg"></el-input>
          </el-form-item>
          <el-form-item label="身份证地址" prop="idCardAddress">
            <el-input v-model="addForm.idCardAddress"></el-input>
          </el-form-item>
          <el-form-item label="入职时间" prop="startTime">
            <el-date-picker v-model="addForm.startTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备用联系人姓名" prop="standByPeople">
            <el-input v-model="addForm.standByPeople"></el-input>
          </el-form-item>
          <el-form-item label="备用联系人关系" prop="standByRelationship">
            <el-input v-model="addForm.standByRelationship"></el-input>
          </el-form-item>
          <el-form-item label="备用联系人电话" prop="standByPhone">
            <el-input v-model="addForm.standByPhone"></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="jobId">
            <el-input v-model="addForm.jobId"></el-input>
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-input v-model="addForm.departmentId"></el-input>
          </el-form-item>
          <el-form-item label="照片" prop="img">
            <el-upload ref="upload" action="http://upload.qiniup.com/" :on-preview="handlePreview" :data="qiniuInfo" :on-remove="handleRemove" :file-list="titlePicList" list-type="picture" :limit="3" :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="uploadError" multiple>
              <el-button size="small" type="primary">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过2MB
              </div>
            </el-upload>
            <el-alert v-if="uploadErrorShow" :title="uploadErrorMsg" type="warning" show-icon @close="
                () => {
                  uploadErrorShow = false;
                }
              "></el-alert>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addClerk">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改职员信息的对话框 -->
      <el-dialog title="修改职员信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
        <el-form ref="editFormRef" :model="editForm" label-width="110px" :rules="editFormules" :inline="true">
          <el-form-item label="职工号" prop="employeeNo">
            <el-input v-model="editForm.employeeNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="职员姓名" prop="name">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="职员性别" prop="gender">
            <el-input v-model="editForm.gender" disabled></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="editForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="居住地址" prop="address">
            <el-input v-model="editForm.address"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="certificateType">
            <el-select v-model="editForm.certificateType" placeholder="请选择证件类型" class="select">
              <el-option label="身份证" value="身份证"></el-option>
              <el-option label="护照" value="护照"></el-option>
              <el-option label="警官证" value="警官证"></el-option>
              <el-option label="军官证" value="军官证"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号" prop="idCard">
            <el-input v-model="editForm.idCard" disabled></el-input>
          </el-form-item>
          <el-form-item label="证件图片" prop="idCardImg">
            <el-input v-model="editForm.idCardImg"></el-input>
          </el-form-item>
          <el-form-item label="身份证地址" prop="idCardAddress">
            <el-input v-model="editForm.idCardAddress" disabled></el-input>
          </el-form-item>
          <el-form-item label="入职时间" prop="startTime">
            <el-date-picker v-model="editForm.startTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备用联系人姓名" prop="standByPeople">
            <el-input v-model="editForm.standByPeople"></el-input>
          </el-form-item>
          <el-form-item label="备用联系人关系" prop="standByRelationship">
            <el-input v-model="editForm.standByRelationship"></el-input>
          </el-form-item>
          <el-form-item label="备用联系人电话" prop="standByPhone">
            <el-input v-model="editForm.standByPhone"></el-input>
          </el-form-item>
          <el-form-item label="岗位" prop="jobId">
            <el-input v-model="editForm.jobId"></el-input>
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-input v-model="editForm.departmentId"></el-input>
          </el-form-item>
          <el-form-item label="照片" prop="img">
            <el-input v-model="editForm.img"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editClerk">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.queryInfo.pageNum" :page-sizes="[5, 30, 50, 100]" :page-size="this.queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 
      预览缩略图 
      这里因为实在对话框里面，对话框的层级要高，所以需要用z-index，注意是number类型，不是String类型
    -->
    <el-image-viewer v-if="showImage" :on-close="prePicFile_close" :url-list="prePicList" :z-index=9999 />
  </div>
</template>
<script>
import { utils } from "@/utils/utils.js";
import { // 七牛接口
  getUploadToken,
  delQnFiles
} from "@/api/qiniu.js";
import ElImageViewer from "element-ui/packages/image/src/image-viewer"; // 引入图片预览组件
import axios from 'axios'
export default {
  components: {
    ElImageViewer, // 图片预览
  },
  data() {
    var checkMobile = utils.checkMobile()
    return {
      // 获取职员列表的参数对象
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      qiniuInfo: { //七牛图片上传参数
        token: "",
        key: "",
        domain: "https://tm.51jiama.com/"
      },
      clerkList: [],
      colData: [
        { title: "序号", istrue: true },
        { title: "职工号", istrue: true },
        { title: "职员姓名", istrue: true },
        { title: "职员性别", istrue: true },
        { title: "联系电话", istrue: true },
        { title: "居住地址", istrue: true },
        { title: "证件类型", istrue: true },
        { title: "证件号", istrue: true },
        { title: "证件图片", istrue: true },
        { title: "身份证地址", istrue: true },
        { title: "入职时间", istrue: true },
        { title: "备用联系人姓名", istrue: true },
        { title: "备用联系人关系", istrue: true },
        { title: "备用联系人电话", istrue: true },
        { title: "岗位", istrue: true },
        { title: "所属部门", istrue: true },
        { title: "照片", istrue: true },
      ],
      colOptions: [],//多选框默认全选
      colSelect: [],//所有表头标题,跟多选框组绑定的
      certificateValue: [],//筛选下拉框多选：证件类型

      showImage: false, // 预览缩略图,
      titlePicList: [], //存放缩略图数组(存的是图片对象),
      prePicList: [],//存放预览图数组（存的是图片路径）
      titleKeyList: [], //存放缩略图上传key，上传一次存一次key，方便一次性删除
      uploadErrorShow: false, // 是否显示错误提示
      uploadErrorMsg: '', // 添加图片时错误提示语

      //选中行的id数组
      multipleSelection: [],
      imgs:[],//图片数组，存储上传多张图片
      idsArray: {
        ids: []
      },
      total: 0,
      // 控制添加对话框的显示与隐藏
      addDialogVisible: false,
      // 控制修改对话框的显示与隐藏
      editDialogVisible: false,
      // 添加职员的表单数据
      addForm: {
        employeeNo: '',
        name: '',
        gender: '',
        phone: '',
        address: '',
        certificateType: '',
        idCard: '',
        idCardImg: '',
        idCardAddress: '',
        startTime: '',
        standByPeople: '',
        standByRelationship: '',
        standByPhone: '',
        jobId: '',
        departmentId: '',
        img:''
      },
      // 查询到的编辑职员信息
      editForm: {},
      // 添加表单的验证规则对象
      addFormRules: {
        employeeNo: [{ required: true, message: '请输入职工号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],

        address: [{ required: true, message: '请输入居住地址', trigger: 'blur' }],
        certificateType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
        idCard: [
          { required: true, message: '请输入证件号', trigger: 'blur' },
        ],
        idCardAddress: [{ required: true, message: '请输入身份证地址', trigger: 'blur' }],
        jobId: [{ required: true, message: '请输入岗位', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请输入所属部门', trigger: 'blur' }],
      },
      // 修改职员信息表单的验证规则
      editFormules: {
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ],
        address: [{ required: true, message: '请输入居住地址', trigger: 'blur' }],
        jobId: [{ required: true, message: '请输入岗位', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请输入所属部门', trigger: 'blur' }],
      }

    }

  },
  created() {
    this.getClerkList()
    this.getQiniuToken()
    var _this = this;
    for (let i = 0; i < _this.colData.length; i++) {
      _this.colSelect.push(_this.colData[i].title);
      if (_this.colData[i].title == '证件号' || _this.colData[i].title == '证件图片'
        || _this.colData[i].title == '备用联系人姓名' || _this.colData[i].title == '备用联系人关系'
        || _this.colData[i].title == '备用联系人电话') { //初始化不想展示的列可以放在这个条件里
        continue;
      }
      _this.colOptions.push(_this.colData[i].title);
    }
  },
  watch: {
    // 单选列实现
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
        } else {
          i.istrue = true;
        }
      });
      this.$nextTick(() => {
        this.$refs.tableDataRef.doLayout();
      });
    }
  },
  methods: {
    // 获取职员档案列表
    async getClerkList() {
      this.queryInfo = this.getQueryCondition()
      const { data: res } = await this.$http.get('EmployeeinfoAction/getBasicInfos', { params: this.queryInfo })
      if (!res.success) return this.$message.error('获取职员列表失败')
      console.log(res)
      for (var i = 0; i < res.rows.length; i++) {
        if (res.rows[i].startTime !== null)
          res.rows[i].startTime = utils.formatDate(res.rows[i].startTime)
        else
          continue
      }
      this.clerkList = res.rows
      this.total = res.total
    },
    //点击按钮，添加职员
    addClerk() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post("EmployeeinfoAction/addObject", this.addForm)
        if (!res.success) return this.$message.error('添加职员失败')
        //关闭对话框
        this.addDialogVisible = false
        //刷新数据列表
        this.getClerkList()
        this.$message.success('添加职员成功')
      })
    },
    // 展示编辑职员的对话框
    async showEditDialog(id) {
      const { data: res } = await this.$http.post("EmployeeinfoAction/getObjectById", { id })
      if (!res.success)
        return this.$message.error('查询职员失败')
      this.editForm = res.rows[0]
      // console.log(this.editForm);
      this.editDialogVisible = !this.editDialogVisible
    },
    //点击按钮，修改职员信息
    editClerk() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post("EmployeeinfoAction/updateNoNull", this.editForm)
        if (!res.success) return this.$message.error('修改职员信息失败')
        //关闭对话框
        this.editDialogVisible = false
        //刷新数据列表
        this.getClerkList()
        this.$message.success('修改职员信息成功')
      })
    },
    // 根据id删除职员
    async removeUserById(ids) {
      // 先弹框询问用户是否确定要删除
      const confirmResult = await this.$confirm('此操作将永久删除该职员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      })
      // 如果点击取消返回的是字符串cancel
      // 如果点击确认返回的是字符串confirm
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消了删除')
      }
      const { data: res } = await this.$http.post("EmployeeinfoAction/deleteByIds", { ids })
      console.log(res);
      if (!res.success) {
        return this.$message.error('删除职员失败')
      }
      this.$message.success('删除职员成功')
      // 刷新列表
      this.getClerkList()
    },
    // 监听修改职员对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    //批量删除
    async removeUserByIds() {
      const rows = this.$refs.tableDataRef.selection;
      if (rows.length === 0) {
        this.$message.warning('请选择需要操作的数据')
        return
      }
      else {
        // 先弹框询问用户是否确定要删除
        const confirmResult = await this.$confirm('此操作将永久删除该职员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => {
          return err
        })
        if (confirmResult !== 'confirm') {
          return this.$message.info('取消了删除')
        }
        const { data: res } = await this.$http.post("EmployeeinfoAction/deleteByIds", this.idsArray)
        console.log(res);
        if (!res.success) {
          return this.$message.error('删除职员失败')
        }
        this.$message.success('删除职员成功')
        //此时全选框还是选中状态，批量删除后需清除选中状态
        this.$refs.tableDataRef.clearSelection();
        // 刷新列表
        this.getClerkList()
      }
    },
    //当多选框选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.idsArray.ids = [] //每次点击需清空原本数组的内容
      this.multipleSelection.map(item => { //遍历数组，把id存进自定义的数组里
        this.idsArray.ids.push(item.id)
      })
      this.idsArray.ids = this.idsArray.ids.join(',')
      // console.log(this.idsArray);

    },
    //导出Excel表
    handleDownload() {
      window.open(axios.defaults.baseURL + '/EmployeeinfoAction/exportDataToExcel?token=' + window.sessionStorage.getItem('token'))
    },
    // 监听pageSize改变的事件
    handleSizeChange(newpageSize) {
      // console.log(newpageSize)
      this.queryInfo.pageSize = newpageSize
      // pageSize改变重新拿到职员列表
      this.getClerkList()
    },
    // 监听当前页码改变的事件
    handleCurrentChange(newpageNum) {
      // console.log(newpageNum)
      this.queryInfo.pageNum = newpageNum
      this.getClerkList()
    },
    addDialogReset() {
      // 拿到表单的引用进行重置
      this.$refs.addFormRef.resetFields()
      //清空缩略图数组
      this.titlePicList = []
    },
    // 全选或取消全选实现
    filterFunHandle(type, currentItem, index) {
      if (type === 'allchecked') { // 全选
        if (this.colSelect.length === 0) {
          this.colData.forEach((result) => {
            this.colSelect.push(result.title)
          })
          this.colOptions = this.colSelect // 复选框置为复选所有值，全部选择

        } else {
          this.colOptions = this.colSelect // 复选框置为复选所有值，全部选择

        }
      } else if (type === 'cancel') { // 取消全选
        this.colOptions = [] // 复选框置为空，全部不选择

      }
    },
    //工具栏的各种下拉框筛选监听
    async selectChange() {
      this.getClerkList()
    },
    //获取工具栏的各类查询条件：搜索框关键词、筛选框值等
    getQueryCondition() {
      //搜索框筛选
      var search = `(employeeinfo.name like "%${this.queryInfo.query}%" or employeeinfo.employeeNo like "%${this.queryInfo.query}%")`;
      // 证件类型下拉框筛选
      var card = '';
      if (this.certificateValue.length != 0) {
        card += ` and(`;
        for (var i in this.certificateValue) {
          card += ` employeeinfo.certificateType='${this.certificateValue[i]}'`
          if (i != this.certificateValue.length - 1) {
            card += ` or `
          }
        }
        card += `)`
      }
      this.queryInfo.condition = `${search}${card}`;
      return this.queryInfo;
    },
    //放大图片显示
    handlePreview(file) {
      console.log(file);
      //把图片路径存进预览图数组
      this.prePicList.push(file.url);
      this.showImage = true;
    },
    // 关闭预览
    prePicFile_close() {
      this.showImage = false;
    },
    // 移除图片
    handleRemove(file, fileList) {
      this.titlePicList = fileList;
      this.addForm.img = '';
    },
    //  上传图片之前
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.uploadErrorMsg = '上传图片只能是 jpg , png 格式';
        this.uploadErrorShow = true;
      }
      if (!isLt2M) {
        this.uploadErrorMsg = '图片大小不能超过2MB';
        this.uploadErrorShow = true;
      }
      return isJPG && isLt2M;
    },
    //图片添加成功
    uploadSuccess(res) {
      //拼接出上传的图片在服务器的完整地址
      this.imgs.push(this.qiniuInfo.domain + res.key);
      this.addForm.img = this.imgs.join()
      this.titleKeyList.push(res.key); // 上传成功一次的key存入数组，在进行创建或取消创建时把多余的图片从七牛删除
      //重置上传文件key，为下次上传做好准备
      this.qiniuInfo.key = new Date().getTime() + "" + Math.floor(Math.random() * 1000) + ".jpg";
    },
    //图片添加失败
    uploadError(err, file, fileList) {
      utils.notifyBr('error', '图片上传失败，请重试！');
    },
    // 获取七牛上传凭证：有效期10小时
    getQiniuToken() {
      getUploadToken().then((res) => {
        if (res.data.success) {
          this.qiniuInfo.token = res.data.data.token;
          this.qiniuInfo.key = new Date().getTime() + "" + Math.floor(Math.random() * 1000) +
            ".jpg";
        } else {
          utils.notifyBr('error', '获取上传凭证失败！')
        }
      })
    },

  }
}
</script>
<style lang="less" scoped>
//修改时间选择器宽度
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 202px;
}
</style>